<template>
    <div>
      <Header :headername="bookInfo.bookName">
        <a @click="goCreateBookChapterPage" style="color:#F60;line-height: 52px;">新建章节</a>
      </Header>
      <div>
         <button-tab v-model="tabIndex">
          <button-tab-item>作品管理</button-tab-item>
          <button-tab-item >作品信息</button-tab-item>
        </button-tab>
      </div>
      <!-- 章节管理 -->
      <div v-if="tabIndex==0">
        <group v-for="(item,index) in volumeList" :key="index">
            <cell :title="item.volumeName" 
              :border-intent="false"
              :arrow-direction="showContent[index] ? 'up' : 'down'"
              @click.native="goGetManageVolumePage(item.vilumeId,index)" :value="'（'+item.list.length+'）章'" is-link>
            </cell>
              <template v-if="showContent[index]">
                <cell-box :border-intent="false" @click.native="goUpdateChapter(item.id)" v-for="(item,index) in item.list" :key="index" class="sub-item" is-link>{{item.name}}</cell-box>
              </template>
        </group>
      </div>
      <!-- 章节信息 -->
      <div v-if="tabIndex==1">
         <group>
          <x-input title="作品名称" v-model="bookInfo.bookName" disabled ></x-input>
          <x-input title="所属频道" v-model="bookInfo.channel" disabled ></x-input>
          <x-input title="所属分类" v-model="bookInfo.classifiy" disabled ></x-input>
          <x-input title="作品状态" v-model="bookInfo.checkInfo" disabled :class="{'green-color':bookInfo.check==3||bookInfo.check==4,'red-color':bookInfo.check==0||bookInfo.check==1,'yellow-color':bookInfo.check==2}"></x-input>
           <x-textarea title="作品简介" v-model="bookInfo.describe" :max="400" :rows="5" ></x-textarea>
           <div style="padding:20px;">
              <x-button type="warn" @click.native="updateDescribeByBookId">保存</x-button>
           </div>
        </group>
      </div>    
      <divider>37K小说网 创作改变人生</divider>
    </div>
</template>

<script>
import Header from '@/components/commons/header/header'
import Footer from '@/components/commons/footer/footer'
import bookController from '@/api/bookController/index'
import USER from '@/utils/user'
    export default {
        name:'getManageBookPage',
         data(){
          return {
            userInfo: null,
            tabIndex:0,
            volumeList:null,
            bookInfo:{
              bookName:null,
              bookId:null,
              check:null,
              channel:null,
              classifiy:null,
              checkInfo:null,
              describe:null
             },
            showContent:[false,false,false,false,false]
            }
          },
          created(){            
            this.getLoginInfo();           
          },
          components:{Header, Footer},
          methods:{
            getLoginInfo(){ //获取登录信息,如果登录，重定向至登录页面
              var loginInfo = USER.getUserInfo();
              this.userInfo = loginInfo;
              if(loginInfo.isLogin==1){ //0已登录 1未登录
                this.$router.push({name:'login'})
              }else if(!loginInfo.userCustominfo5){//不存在笔名，非作者，跳转至创建笔名页面
                this.$router.push({name:'penName'})
              }else{   //请求小说信息
                if(JSON.stringify(this.$route.params)=="{}"){ //是否传有参数
                  this.$router.push({name:'library'})
                }else{
                  this.bookInfo.bookName = this.$route.params.bookName;
                  this.bookInfo.bookId = this.$route.params.bookId;
                  bookController.bookInfoById({id:this.bookInfo.bookId,sort:'desc'}).then(response=>{
                     this.volumeList = response.data.list;
                     this.bookInfo.bookName = response.data.name;
                     this.bookInfo.channel = response.data.channelName;
                     this.bookInfo.classifiy = response.data.classifyName;
                     this.bookInfo.check = response.data.check;
                     this.bookInfo.describe = response.data.describ;
                     this.bookInfo.bookId = response.data.id;
                     this.bookInfo.checkInfo = response.data.checkInfo;                     
                  })
                }
              }
            },
            goCreateBookChapterPage(){//跳转至书籍章节创建
              this.$router.push({name:'createBookChapterPage',params:this.bookInfo})
            },
            goGetManageVolumePage(value,index){
              var res = [];
              for(var i = 0;i<this.showContent.length;i++){
                if(i==index){
                  res.push(!this.showContent[index]);
                }else{
                  res.push(false);
                }                
              }
              this.showContent = res;                 
            },
            updateDescribeByBookId(){
              var formData = {
                id:this.bookInfo.bookId,
                describ:this.bookInfo.describe
              }
              bookController.updateDescribeByBookId(formData).then(response=>{
                if(response.success){
                    this.$vux.toast.show({
                    text: response.msg,
                    type:'success'
                  })
                }else{
                  this.$vux.toast.show({
                    text: response.msg,
                    type:'warn'
                  })  
                }                      
              })
            },
            goUpdateChapter(id){
               this.$router.push({name:'updateChapter',params:{id:id}})
            }
          }
    }
</script>

<style scoped>
  .vux-button-group > a.vux-button-group-current{
    color: #000;
    background: #ffe26d;
  }
.vux-button-group > a.vux-button-tab-item-first:after{
   border-color:#ccc;
}
.vux-button-group > a.vux-button-tab-item-last:after{
  border-color:#ccc;
}
.sub-item {
  color: #888;
}
.slide {
  padding: 0 20px;
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.1s;
}
.animate {
  max-height: 9999px;
  transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
  transition-delay: 0s;
}
</style>
